<template>
  <div class="congestion">
    <p>{{ title }}</p>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <div :class="['progress', item.className]"></div>
        <div>{{ item.title }}</div>
      </li>
    </ul>
  </div>
</template>
<script>
  import { defineComponent, reactive, toRefs } from 'vue';
  export default defineComponent({
    props: {
      title: {
        type: String,
        default: '',
      },
      list: {
        type: Array,
        default: () => {
          return [];
        },
      },
    },
    setup() {
      const state = reactive({});
      return {
        ...toRefs(state),
      };
    },
  });
</script>
<style lang="less" scoped>
  .congestion {
    width: 100%;
    & > p {
      font-size: 14px;
      color: #fff;
      margin-bottom: 20px;
    }
    ul {
      display: flex;
      align-items: center;
      li {
        flex: 1;
        text-align: center;
        color: #ebebeb;
        margin-right: 7px;
        font-size: 12px;
        &:last-child {
          margin-right: 0;
        }
        .green-linear {
          background: linear-gradient(-90deg, #8dfcb0 0%, #4aede3 98%);
        }
        .blue-linear {
          background: linear-gradient(-90deg, #205eb9 0%, #428ae6 98%);
        }
        .yellow-linear {
          background: linear-gradient(-90deg, #e1c431 0%, #fff5b6 100%);
        }
        .red-linear {
          background: linear-gradient(-90deg, #ff3330 0%, #ff554d 100%);
        }
        .key_1 {
          background-color: #1adff1;
        }
        .key_2 {
          background-color: #f76f39;
        }
        .key_3 {
          background-color: #f1d51a;
        }
        .key_4 {
          background-color: #1af19d;
        }
        .key_5 {
          background-color: #139df4;
        }
      }
    }
  }
  .progress {
    height: 8px;
    margin-bottom: 10px;
  }
</style>
